const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin"); //用于把HTML页面放入内存
// const vueload=require("vue-loader/lib/plugin")
const minicss = require("mini-css-extract-plugin"); //webpack4.0以后的打包css文件
const optimizecssassetswebpackplugin = require("optimize-css-assets-webpack-plugin"); //压缩如果你使用ui组件库已经压缩的css就别必要了
const webpack = require("webpack");
const clernWebpackPlugin = require("clean-webpack-plugin");
const webpackbar = require("webpackbar");
const svgToMiniDataURI = require('mini-svg-data-uri');
const htmlplugin = new HtmlWebpackPlugin({
  template: path.join(__dirname, "./src/index.html"), //源头文件
  filename: "index.html", //生成首页的文件名称
  minify: {
    removeAttributeQuotes: true,
    collapseWhitespace: true,
  },
});
const css = new minicss({
  //输出css独立文件
  filename: "./css/[name].css",
  chunkFilename: "[name].css", //或者id
});
module.exports = (ctx,next) => {
  console.log(ctx,next,'asa')
  let config = {
    //webpack基于node构建的
    mode: "development",
    entry: ["webpack-hot-middleware/client", "./src/index.js"],
    output: {
      filename: "main.[hash:8].js", //通过热加载输出script文件挂载在目录与index.HTML一样
      path: path.resolve(__dirname, "dist"),
    },
    watch: true,
    watchOptions: {
      poll: 1000,
      // aggregateTimeOut: 500,
      ignored: /node_modules/,
    },
    //production 提供了约定大于配置 约定打包文件是src/index ->dist/main
    plugins: [
      htmlplugin,
      //    new vueload() ,
      css,
      new webpackbar(),
      new webpack.HotModuleReplacementPlugin(),
      //    new clernWebpackPlugin('./dist')
    ],
    module: {
      //所以第三方模块的配置规则
      rules: [
        {
          test: /\.js|.jsx$/,
          loader: "babel-loader",
          exclude: /node_modules/,
        },
        {
          test: /\.scss$/,
  
          use: [
            { loader: minicss.loader },
            {
              loader: "css-loader",
              options: { modules: true },
            },
            "sass-loader",
          ],
        },
        {
          test: /\.tsx$/,
          loader: "ts-loader",
          options: { appendTsSuffixTo: [/\.vue$/] },
          exclude: /node_modules/,
        },
        {
          test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
          type: 'asset'
          // loader: "url-loader",
          // options: {
          //   limit: 10000,
          // },
        },
        {
          test: /\.svg/,
          type: 'asset/inline',
         generator: {
           dataUrl: content => {
             content = content.toString();
             return svgToMiniDataURI(content);
           }
         }
        },
        {
          test: /\.(jpg|PNG|png|jpeg)/,
          type: 'asset'
          // dependency: { not: ['url'] },
          // use: [
          //   {
          //     loader: "url-loader",
          //     options: {
          //       outputPath: "images/",
          //       limit: 1024, //单位是B 大于这个会打包出来
          //       name: "[name].[ext]",
          //     },
          //   },
          // ],
        },
        // {
        //   type: 'asset',
        //   parser: {
        //     dataUrlCondition: {
        //       maxSize: 8 * 1024
        //     }
        //   },
        //   // generator: {
        //   //   filename: "images/[name][ext]"
        //   // }
        // },
        // {
        //   type: 'asset/resource',
        //   parser: {
        //     dataUrlCondition: {
        //       maxSize: 8 * 1024
        //     }
        //   },
        //   generator: {
        //     filename: "fonts/[name][ext]"
        //   }
        // },
        // { test:/\.js|\jsx$/,use:[{loader:"babel-loader",options:{cacheDirectory:true}}],exclude:/node_modules/},//一个属性use:"babel-loader"两个是数组
        // // { test:/\.css/,use:['style-loader','css-loader']},
        { test: /\.css$/, use: [{ loader: minicss.loader }, "css-loader"] },
        //     { test:/\.scss/,use:['style-loader',  {loader: "css-loader",
        //     options: {//这个是react的css模块化
        //        modules: {
        //            localIdentName: "[path][name]-[local]-[hash:5]"
        //        }//import css from '路径' console.log(css)会生成模块
        //        //这是react的处理办法 vue就是style里面写scoped
        //        //支持id与class 控制台输出的模块是健对值形式
        //     }//css scss less一样的配置模块化
        //    }]},
        // {
        //   test: /\.(jpg|PNG|png|jpeg)/,
        //   use: [
        //     {
        //       loader: "url-loader",
        //       options: {
        //         outputPath: "images/",
        //         limit: 1024, //单位是B 大于这个会打包出来
        //         name: "[name].[ext]",
        //       },
        //     },
        //   ],
        // },
        //    { test:/.vue$/,use:[{loader:"vue-loader"}]},
      ],
    },
    devtool: "source-map", //inline把js打包在一个文件里面 hidden分离出来 eval也是分离
    // optimization:{//代码分割 下面vendors就是分割代码之后(把相同的库或者文件都提出来打包) 你可能在想css文件去哪了 你注销代码分割 你可以看见css文件夹
    //     splitChunks:{
    //         chunks:"all"
    //     }
    // },
    resolve: {
      // 将 `.ts` 添加为一个可解析的扩展名。
      extensions: [".js", ".jsx", ".tsx", ".json"],
    },
    devServer: {
      port: 7000,
      hot: true,
      // grogress: true,
      historyApiFallback: true,
      //true 表示webpack支持使用history false路由默认是hash
    },
    performance: {
      hints: "warning", //false关闭提示 下面设置就没必要了
      //入口起点的最大体积
      maxEntrypointSize: 50000000,
      //生成文件的最大体积
      maxAssetSize: 30000000,
      //只给出 js 文件的性能提示
      assetFilter: function (assetFilename) {
        return assetFilename.endsWith(".js");
      },
    },
  };
  return config
}
